﻿<?php

/**
 * 书籍时间线
 *
 * @package custom
 *
 */

$this->need('includes/header.php');
$db = Typecho_Db::get();
$prefix = $db->getPrefix();
$books = $db->fetchAll(
        $db->select()->from($prefix.'booksline')->order($prefix.'booksline.id', Typecho_Db::SORT_ASC));
?>

<div class="container">

<link rel="stylesheet" href="<?php $this->options->themeUrl('css/jazz-timeline.css'); ?>">
<div class="jazz-timeline-wrapper" id="skrollr-body">
    <div class="jazz-timeline dark-timeline ultimate-style">

    <?php foreach($books as $book):?>

        <div class="timeline-post turqoise-post">
            <div class="timeline-meta">
                <div class="meta-details"><?php _e($book['date'])?></div>
            </div>
            <div class="timeline-icon icon-dot">
                <div class="timeline-bar"></div>
            </div>
            <div class="timeline-content" data--20-bottom-top='opacity: 0; left: 50px;' data--50-bottom-bottom='opacity: 1; left: 0;'>
                <h2 class="content-title turqoise-title"><?php _e($book['name'])?>&nbsp;&nbsp;&nbsp;&nbsp;<sub><?php _e($book['author'])?></sub></h2>
                <div class="content-details">
                    <p><?php _e($book['info'])?></p>
                </div>
            </div><!-- timeline content -->
        </div><!-- .timeline-post -->
    <?php endforeach;?>
    </div><!-- .timeline -->
</div><!-- .jazz-timeline-wrapper -->
</div>
<script type="text/javascript" src="<?php $this->options->themeUrl('js/skrollr.min.js'); ?>"></script>
<script type="text/javascript">
    var s = skrollr.init();
</script>
